<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>习惯养成计划表 - 职场观察者知识库</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Source+Han+Sans+CN:wght@300;400;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        'highlight-bg': '#EFF6FF',
                        'highlight-text': '#1E40AF',
                    }
                }
            }
        }
    </script>
    <style>
        :root {
            --theme-primary: #3B82F6;
            --theme-secondary: #10B981;
            --highlight-bg: #EFF6FF;
            --highlight-text: #1E40AF;
        }
        body {
            font-family: 'Source Han Sans CN', sans-serif;
            font-weight: 300;
        }
        h1, h2, h3, blockquote {
            font-family: 'Noto Serif SC', serif;
        }
        .magazine-page {
            width: 800px;
            background: #fefefe;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            min-height: auto;
        }
        .dark .magazine-page {
            background: #111827;
        }
        .dark p {
            color: #d1d5db;
        }
        .dark h1, .dark h2, .dark h3 {
            color: #f9fafb;
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 4em;
            line-height: 0.8;
            margin: 0.1em 0.1em 0 0;
            font-weight: 700;
            font-family: 'Noto Serif SC', serif;
        }
        .breathing-space {
            letter-spacing: 0.05em;
            line-height: 1.8;
        }
        .sop-table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 1.5rem;
        }
        .sop-table th, .sop-table td {
            border: 1px solid #e5e7eb;
            padding: 0.75rem;
            text-align: left;
        }
        .sop-table th {
            background-color: #f9fafb;
            font-weight: 600;
        }
        .editable {
            min-height: 40px;
            padding: 0.5rem;
            border: 1px dashed #d1d5db;
            border-radius: 0.25rem;
            transition: all 0.3s ease;
        }
        .editable:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            background-color: #f8fafc;
        }
        .sop-card {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .sop-card h3 {
            color: #1e40af;
            border-bottom: 2px solid #e5e7eb;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
        }
        .method-explanation {
            background-color: #f0f9ff;
            border-left: 4px solid #3b82f6;
            padding: 1rem;
            margin-bottom: 1.5rem;
            border-radius: 0 0.5rem 0.5rem 0;
        }
        .input-hint {
            font-size: 0.75rem;
            color: #6b7280;
            margin-top: 0.25rem;
        }
        .save-indicator {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #10b981;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .save-indicator.show {
            opacity: 1;
        }
        .habit-tracker {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
            margin-top: 10px;
        }
        .habit-day {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .habit-day.empty {
            background-color: #f3f4f6;
            border: 1px solid #d1d5db;
        }
        .habit-day.completed {
            background-color: #10b981;
            color: white;
        }
        .habit-day.missed {
            background-color: #ef4444;
            color: white;
        }
        .habit-day.partial {
            background-color: #f59e0b;
            color: white;
        }
        .phase-card {
            border-left: 4px solid;
            padding: 1rem;
            margin-bottom: 1rem;
            border-radius: 0 0.5rem 0.5rem 0;
        }
        .phase-sprint {
            border-left-color: #ef4444;
            background-color: #fef2f2;
        }
        .phase-powerless {
            border-left-color: #f59e0b;
            background-color: #fffbeb;
        }
        .phase-stabilization {
            border-left-color: #10b981;
            background-color: #f0fdf4;
        }
        .woop-card {
            padding: 1rem;
            margin-bottom: 1rem;
            border-radius: 0.5rem;
        }
        .woop-wish {
            background-color: #f0f9ff;
            border-left: 4px solid #3b82f6;
        }
        .woop-outcome {
            background-color: #f0fdf4;
            border-left: 4px solid #10b981;
        }
        .woop-obstacle {
            background-color: #fef2f2;
            border-left: 4px solid #ef4444;
        }
        .woop-plan {
            background-color: #fffbeb;
            border-left: 4px solid #f59e0b;
        }
        .goal-card {
            padding: 1rem;
            margin-bottom: 1rem;
            border-radius: 0.5rem;
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center min-h-screen p-4 md:p-8">
    <article class="magazine-page shadow-2xl p-8">
        <!-- 页面头部 -->
        <header class="mb-8">
            <h1 class="text-3xl font-bold leading-tight mb-2 relative">
                <span class="absolute left-0 -top-2 bottom-2 w-1.5 bg-primary rounded-full"></span>
                <span class="ml-6">习惯养成计划表</span>
            </h1>
            <p class="text-lg text-gray-600 dark:text-gray-400 font-light ml-6">科学培养好习惯，实现个人成长突破</p>
        </header>

        <!-- 方法说明 -->
        <div class="method-explanation">
            <h3 class="font-bold text-primary mb-2">方法简介</h3>
            <p class="text-gray-700">习惯养成是一个系统过程，通过科学的方法和工具，可以帮助您有效建立并维持良好的习惯，实现个人和职业生活的积极改变。</p>
        </div>

        <!-- 导出按钮 -->
        <div class="flex justify-end mb-6 gap-3">
            <button id="export-pdf" class="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center">
                <i data-lucide="file-text" class="w-5 h-5 mr-2"></i>
                导出为PDF
            </button>
            <button id="export-doc" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition duration-300 flex items-center">
                <i data-lucide="download" class="w-5 h-5 mr-2"></i>
                导出为文档
            </button>
        </div>

        <!-- 习惯养成内容 -->
        <div id="sop-content">
            <!-- 目标分解清单 -->
            <div class="sop-card">
                <h3 class="text-xl font-bold flex items-center">
                    <i data-lucide="target" class="w-6 h-6 mr-2 text-primary"></i>
                    目标分解清单
                </h3>
                
                <div class="goal-card">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Setting Goals 设置目标</label>
                        <div class="editable" contenteditable="true" data-placeholder="您希望实现的主要目标是什么？例如：每天锻炼30分钟、每周阅读一本书..."></div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Goals to be achieved 期待实现的目标</label>
                        <div class="editable" contenteditable="true" data-placeholder="这个目标实现后会带来什么具体好处？例如：提高精力、减轻压力、提升专业知识..."></div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Decomposition Goals 分解目标</label>
                        <div class="editable" contenteditable="true" data-placeholder="将大目标分解为小步骤。例如：第一周每天锻炼10分钟，第二周增加到15分钟..."></div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Simplify to something easy to do 简化成容易做到的事</label>
                        <div class="editable" contenteditable="true" data-placeholder="如何让第一步变得极其简单？例如：只需穿上运动鞋、只读一页书..."></div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Action List 行动清单</label>
                        <div class="editable" contenteditable="true" data-placeholder="具体的行动步骤。例如：1. 晚上准备好运动服装 2. 设定手机提醒 3. 记录完成情况..."></div>
                    </div>
                </div>
            </div>
            
            <!-- 习惯养成计划表 -->
            <div class="sop-card">
                <h3 class="text-xl font-bold flex items-center">
                    <i data-lucide="calendar" class="w-6 h-6 mr-2 text-primary"></i>
                    习惯养成计划表
                </h3>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Objective 目标</label>
                    <div class="editable" contenteditable="true" data-placeholder="您要培养的具体习惯是什么？"></div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="phase-card phase-sprint">
                        <h4 class="font-bold text-red-700 mb-2">Sprint period 冲刺期 (1-3周)</h4>
                        <div class="editable" contenteditable="true" data-placeholder="这个阶段需要大量意志力。计划如何克服初期困难？"></div>
                    </div>
                    
                    <div class="phase-card phase-powerless">
                        <h4 class="font-bold text-amber-700 mb-2">Powerless period 无力期 (4-6周)</h4>
                        <div class="editable" contenteditable="true" data-placeholder="这个阶段动力下降。计划如何应对倦怠和挫折？"></div>
                    </div>
                    
                    <div class="phase-card phase-stabilization">
                        <h4 class="font-bold text-green-700 mb-2">Stabilization period 稳定期 (7周+)</h4>
                        <div class="editable" contenteditable="true" data-placeholder="这个阶段习惯开始自动化。计划如何巩固和维持？"></div>
                    </div>
                </div>
                
                <!-- 习惯追踪 -->
                <div class="mt-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">30天习惯追踪</label>
                    <div class="habit-tracker" id="habit-tracker">
                        <!-- 日期将通过JavaScript动态生成 -->
                    </div>
                    <div class="flex items-center mt-4 space-x-4 text-sm">
                        <div class="flex items-center">
                            <div class="habit-day completed mr-2"></div>
                            <span>已完成</span>
                        </div>
                        <div class="flex items-center">
                            <div class="habit-day partial mr-2"></div>
                            <span>部分完成</span>
                        </div>
                        <div class="flex items-center">
                            <div class="habit-day missed mr-2"></div>
                            <span>未完成</span>
                        </div>
                        <div class="flex items-center">
                            <div class="habit-day empty mr-2"></div>
                            <span>未开始</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 新习惯培养清单 -->
            <div class="sop-card">
                <h3 class="text-xl font-bold flex items-center">
                    <i data-lucide="list" class="w-6 h-6 mr-2 text-primary"></i>
                    新习惯培养清单
                </h3>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Current Habits 现在的习惯</label>
                    <div class="editable" contenteditable="true" data-placeholder="列出您现有的日常习惯，特别是那些可以关联新习惯的。"></div>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Things that can be done at the same time 可以同时完成的事</label>
                    <div class="editable" contenteditable="true" data-placeholder="如何将新习惯与现有习惯结合？例如：刷牙时做深蹲、通勤时听播客..."></div>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">环境设计与准备</label>
                    <div class="editable" contenteditable="true" data-placeholder="如何设计环境让好习惯更容易执行？例如：把水果放在显眼位置、删除手机上的社交媒体应用..."></div>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">奖励机制</label>
                    <div class="editable" contenteditable="true" data-placeholder">完成习惯后如何奖励自己？例如：坚持一周后看一场电影、完成一个月后买一本喜欢的书..."></div>
                </div>
            </div>
            
            <!-- WOOP习惯计划表 -->
            <div class="sop-card">
                <h3 class="text-xl font-bold flex items-center">
                    <i data-lucide="lightbulb" class="w-6 h-6 mr-2 text-primary"></i>
                    WOOP习惯计划表
                </h3>
                
                <div class="woop-card woop-wish">
                    <h4 class="font-bold text-blue-700 mb-2">Wish 希望</h4>
                    <div class="editable" contenteditable="true" data-placeholder="您内心真正渴望实现的愿望是什么？例如：拥有更健康的身体、提高工作效率..."></div>
                </div>
                
                <div class="woop-card woop-outcome">
                    <h4 class="font-bold text-green-700 mb-2">Outcome 结果</h4>
                    <div class="editable" contenteditable="true" data-placeholder="实现这个愿望后，最好的结果会是什么？尽可能具体地想象。"></div>
                </div>
                
                <div class="woop-card woop-obstacle">
                    <h4 class="font-bold text-red-700 mb-2">Obstacle 障碍</h4>
                    <div class="editable" contenteditable="true" data-placeholder="实现愿望过程中，可能遇到的内在障碍是什么？例如：拖延、缺乏动力、时间不够..."></div>
                </div>
                
                <div class="woop-card woop-plan">
                    <h4 class="font-bold text-amber-700 mb-2">Plan 计划</h4>
                    <div class="editable" contenteditable="true" data-placeholder="如果遇到障碍，您将采取什么具体行动？使用'如果...那么...'句式。例如：如果感到疲惫不想运动，那么我只做5分钟简单的伸展。"></div>
                </div>
            </div>
            
            <!-- 使用提示 -->
            <div class="sop-card bg-yellow-50 border border-yellow-200">
                <h3 class="text-lg font-bold text-yellow-800 flex items-center">
                    <i data-lucide="lightbulb" class="w-5 h-5 mr-2"></i>
                    使用提示
                </h3>
                <ul class="text-yellow-700 text-sm list-disc pl-5 space-y-1">
                    <li>从一个小而具体的习惯开始，不要贪多求全</li>
                    <li>将新习惯与现有习惯绑定，形成习惯链</li>
                    <li>设计环境，让好习惯更容易执行，坏习惯更难执行</li>
                    <li>记录进度，及时给予自己奖励</li>
                    <li>预期会遇到挫折，提前制定应对计划</li>
                    <li><strong>写的时候不要过于注重格式排版，而应注重内容</strong></li>
                </ul>
            </div>
        </div>

        <!-- 页面底部信息 -->
        <div class="flex items-center text-green-600 mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
            <i data-lucide="check-circle" class="w-5 h-5 mr-2"></i>
            <span>职场观察者知识库 · 习惯养成计划表</span>
        </div>
        
        <!-- 保存提示 -->
        <div id="save-indicator" class="save-indicator">
            <i data-lucide="check" class="w-4 h-4 mr-1 inline"></i>
            内容已自动保存
        </div>
    </article>

    <script>
        // 初始化Lucide图标
        lucide.createIcons();
        
        // 习惯追踪数据
        let habitData = {};
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 设置占位符文本
            setupEditableFields();
            
            // 初始化习惯追踪器
            initHabitTracker();
            
            // 设置事件监听器
            setupEventListeners();
        });
        
        // 设置可编辑字段
        function setupEditableFields() {
            document.querySelectorAll('.editable').forEach(editable => {
                const placeholder = editable.getAttribute('data-placeholder');
                if (placeholder && !editable.textContent.trim()) {
                    editable.textContent = placeholder;
                    editable.classList.add('text-gray-400');
                }
                
                editable.addEventListener('focus', function() {
                    if (this.textContent === this.getAttribute('data-placeholder')) {
                        this.textContent = '';
                        this.classList.remove('text-gray-400');
                    }
                });
                
                editable.addEventListener('blur', function() {
                    if (!this.textContent.trim()) {
                        this.textContent = this.getAttribute('data-placeholder');
                        this.classList.add('text-gray-400');
                    }
                });
                
                // 自动保存功能
                editable.addEventListener('input', function() {
                    clearTimeout(this.saveTimeout);
                    this.saveTimeout = setTimeout(() => {
                        showSaveIndicator();
                    }, 1000);
                });
            });
        }
        
        // 初始化习惯追踪器
        function initHabitTracker() {
            const tracker = document.getElementById('habit-tracker');
            tracker.innerHTML = '';
            
            // 生成30天的习惯追踪格子
            for (let i = 1; i <= 30; i++) {
                const day = document.createElement('div');
                day.className = 'habit-day empty';
                day.textContent = i;
                day.setAttribute('data-day', i);
                
                // 设置点击事件
                day.addEventListener('click', function() {
                    toggleHabitStatus(this);
                });
                
                tracker.appendChild(day);
            }
        }
        
        // 切换习惯状态
        function toggleHabitStatus(dayElement) {
            const day = dayElement.getAttribute('data-day');
            const currentStatus = habitData[day] || 'empty';
            
            // 状态循环: empty -> completed -> partial -> missed -> empty
            let nextStatus;
            switch(currentStatus) {
                case 'empty':
                    nextStatus = 'completed';
                    break;
                case 'completed':
                    nextStatus = 'partial';
                    break;
                case 'partial':
                    nextStatus = 'missed';
                    break;
                case 'missed':
                    nextStatus = 'empty';
                    break;
                default:
                    nextStatus = 'completed';
            }
            
            // 更新状态
            habitData[day] = nextStatus;
            dayElement.className = `habit-day ${nextStatus}`;
            
            // 显示保存提示
            showSaveIndicator();
        }
        
        // 设置事件监听器
        function setupEventListeners() {
            // 导出按钮
            document.getElementById('export-pdf').addEventListener('click', exportToPDF);
            document.getElementById('export-doc').addEventListener('click', exportToDoc);
        }
        
        // 显示保存提示
        function showSaveIndicator() {
            const indicator = document.getElementById('save-indicator');
            indicator.classList.add('show');
            setTimeout(() => {
                indicator.classList.remove('show');
            }, 2000);
        }
        
        // 导出为PDF
        function exportToPDF() {
            const { jsPDF } = window.jspdf;
            
            // 获取要导出的内容
            const element = document.getElementById('sop-content');
            
            // 临时移除占位符文本
            document.querySelectorAll('.editable').forEach(editable => {
                if (editable.textContent === editable.getAttribute('data-placeholder')) {
                    editable.textContent = '';
                }
            });
            
            // 使用html2canvas将内容转换为图片
            html2canvas(element, {
                scale: 2,
                useCORS: true,
                logging: false
            }).then(canvas => {
                const imgData = canvas.toDataURL('image/png');
                const pdf = new jsPDF('p', 'mm', 'a4');
                const imgWidth = 190; // 页面宽度
                const pageHeight = 277; // A4高度
                const imgHeight = canvas.height * imgWidth / canvas.width;
                let heightLeft = imgHeight;
                let position = 10;
                
                pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
                heightLeft -= pageHeight;
                
                // 如果内容超过一页，添加新页面
                while (heightLeft >= 0) {
                    position = heightLeft - imgHeight + 10;
                    pdf.addPage();
                    pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
                    heightLeft -= pageHeight;
                }
                
                pdf.save('习惯养成计划表.pdf');
                
                // 恢复占位符文本
                document.querySelectorAll('.editable').forEach(editable => {
                    if (!editable.textContent.trim()) {
                        editable.textContent = editable.getAttribute('data-placeholder');
                        editable.classList.add('text-gray-400');
                    }
                });
            });
        }

        // 导出为文档
        function exportToDoc() {
            // 创建一个临时的div来保存格式化内容
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = document.getElementById('sop-content').innerHTML;
            
            // 获取所有可编辑区域的内容
            const editables = tempDiv.querySelectorAll('[contenteditable="true"]');
            editables.forEach(editable => {
                // 移除contenteditable属性
                editable.removeAttribute('contenteditable');
                // 如果内容是占位符，清空
                if (editable.textContent === editable.getAttribute('data-placeholder')) {
                    editable.textContent = '';
                }
                // 添加样式以保持格式
                editable.style.border = '1px solid #ddd';
                editable.style.padding = '8px';
                editable.style.minHeight = '40px';
                editable.style.marginBottom = '10px';
            });
            
            // 创建HTML内容
            const htmlContent = `
                <!DOCTYPE html>
                <html>
                <head>
                    <meta charset="UTF-8">
                    <title>习惯养成计划表</title>
                    <style>
                        body { 
                            font-family: 'Source Han Sans CN', sans-serif; 
                            margin: 20px;
                            color: #333;
                        }
                        h1, h2, h3 { 
                            font-family: 'Noto Serif SC', serif; 
                            color: #1e40af;
                        }
                        h1 { font-size: 24px; border-bottom: 2px solid #1e40af; padding-bottom: 10px; }
                        h3 { font-size: 18px; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px; }
                        .sop-card { 
                            margin-bottom: 30px; 
                            padding: 20px; 
                            border: 1px solid #ddd; 
                            border-radius: 5px; 
                        }
                        .method-explanation {
                            background-color: #f0f9ff;
                            border-left: 4px solid #3b82f6;
                            padding: 15px;
                            margin-bottom: 20px;
                        }
                        .phase-card {
                            border-left: 4px solid;
                            padding: 15px;
                            margin-bottom: 15px;
                            border-radius: 0 5px 5px 0;
                        }
                        .phase-sprint {
                            border-left-color: #ef4444;
                            background-color: #fef2f2;
                        }
                        .phase-powerless {
                            border-left-color: #f59e0b;
                            background-color: #fffbeb;
                        }
                        .phase-stabilization {
                            border-left-color: #10b981;
                            background-color: #f0fdf4;
                        }
                        .woop-card {
                            padding: 15px;
                            margin-bottom: 15px;
                            border-radius: 5px;
                        }
                        .woop-wish {
                            background-color: #f0f9ff;
                            border-left: 4px solid #3b82f6;
                        }
                        .woop-outcome {
                            background-color: #f0fdf4;
                            border-left: 4px solid #10b981;
                        }
                        .woop-obstacle {
                            background-color: #fef2f2;
                            border-left: 4px solid #ef4444;
                        }
                        .woop-plan {
                            background-color: #fffbeb;
                            border-left: 4px solid #f59e0b;
                        }
                        .goal-card {
                            padding: 15px;
                            margin-bottom: 15px;
                            border-radius: 5px;
                            background-color: #f8fafc;
                            border: 1px solid #e2e8f0;
                        }
                        .habit-tracker {
                            display: grid;
                            grid-template-columns: repeat(7, 1fr);
                            gap: 8px;
                            margin-top: 10px;
                        }
                        .habit-day {
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 12px;
                        }
                        .habit-day.empty {
                            background-color: #f3f4f6;
                            border: 1px solid #d1d5db;
                        }
                        .habit-day.completed {
                            background-color: #10b981;
                            color: white;
                        }
                        .habit-day.missed {
                            background-color: #ef4444;
                            color: white;
                        }
                        .habit-day.partial {
                            background-color: #f59e0b;
                            color: white;
                        }
                    </style>
                </head>
                <body>
                    <h1>习惯养成计划表</h1>
                    <div class="method-explanation">
                        <h3>方法简介</h3>
                        <p>习惯养成是一个系统过程，通过科学的方法和工具，可以帮助您有效建立并维持良好的习惯，实现个人和职业生活的积极改变。</p>
                    </div>
                    ${tempDiv.innerHTML}
                </body>
                </html>
            `;
            
            // 创建Blob并下载
            const blob = new Blob([htmlContent], { type: 'application/msword' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = '习惯养成计划表.doc';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
    </script>
</body>
</html>